面向未来的设计协作工具 Figma 入门教程

Figma 是一款功能强大的设计工具,可帮助你创建任何内容:网站、应用程序、logo 等等。

通过学习使用 Figma,你将迈出用户界面设计和用户体验设计的第一步。在你为自己或者为你自己的公司创建一个优秀的作品时,这些技能将非常有用。

在这个 Figma 入门教程中,我将使用来自 Frontend Mentor 的真实项目网站,我们将在 Figma 中重新创建该网站。通过构建项目来学习是巩固知识的好方法,因此我建议你下载素材并跟着教程动手创建。Figma 入门教程视频版本。

在我们探索 Figma 的不同功能时,我将把这个教程分成很多部分,包括:

  • 帐户设置

  • 设计文件

  • 设计素材

  • 如何开始——基础知识

  • 框架

  • 网格列和行

  • 形状

  • 导入图像

  • 标记和分组

  • 文本

  • 导航栏

  • 按钮设计

  • 标题和缩放

  • 附加文本设置

  • 主页横幅和 Figma 层

  • 组和部分

  • 字体和 Figma 颜色

  • 文本行高和间距

  • 对齐和捕捉

  • 使用形状和图像进行遮罩

  • 复制组和节

  • 更新部分

  • 颜色选择器和复制部分(续)

  • 颜色选择和选择正确的色调

  • 推荐区

  • 自动布局

  • 自动布局选项

  • 自动布局对齐

  • 自动布局内容

  • 图库图片

  • 调整图像大小

  • 页脚

  • SVG 颜色和叠加编辑

  • 自动布局菜单页脚

  • 图层工具栏、隐藏和锁定

  • 原型查看器

  • 框架和页面

  • 原型交互

  • 原型交互导航到页面

  • 共享测试和预览原型

  • 导出页面

  • 导出组或部分

在本文中,我将简要概述本教程的一些主要部分,以便你可以开始在 Figma 中进行设计。

介绍

让我们首先在 Figma 网站上创建一个帐户。你可以在 Figma.com 执行此操作。

只需注册一个新帐户(电子邮件或 Google 登录)——完全免费。

接下来,我们需要获取要用于该项目的设计素材,我们将从 Frontend Mentor 获取这些素材。你可以在这里下载它们。

我们将构建第一个草稿页面。看看我们将在下面使用的默认设计布局。选择 +,或在右侧创建一个新的设计页面。

如何在 Figma 中制作框架


首先,我们将创建一个框架,就是一个页面,我们在其上进行设计。你可以根据需要调整框架的大小。

此示例将是一个网站,因此我们将选择桌面框架——但你也可以创建移动应用程序框架,甚至自定义框架。

  • 从顶部菜单中选择框架工具

  • 在右侧面板上选择框架大小

如何在 Figma 中添加网格和列


在我们开始设计之前,你需要添加网格来帮助你保持页面内容对齐的一致性。

你可以向框架添加网格并对其进行自定义。例如,我通常更喜欢 12 个网格,因为这是网站开发的默认设置。

  • 选择要网格化的框架

  • 选择右侧面板上的布局网格

  • 选择列和 12 个单位

如何在 Figma 中使用形状


使用 Figma 中的形状和元素创建正方形、圆形、线条等。这些是在页面上创建设计的基础。

我将从一个简单的矩形开始。我们将使用它来创建主页顶部的横幅部分。

  • 选择方形工具

  • 创建一个正方形

  • 开始塑造和调整它的大小

如何在 Figma 中添加图片


你可以将在线资源或本地的图像添加到你的页面。图片是设计网站的重要组成部分,尤其是对于横幅部分。

让我们添加一个 logo 作为我们将添加到屏幕左上角的第一个图像。

  • 从本地计算机拖放图像

  • 从形状图像上传选项导入图像

  • 调整图像大小并将其放置在设计上

如何在 Figma 中为设计添加文本


要向设计添加文本,请选择文本工具并将其放置在页面上。字体将默认为 Roboto,但你可以在任何阶段更改字体系列、大小和颜色。

在本例中,我们将使用右侧面板来更改字体的颜色和大小,以及稍后的字体系列。

  • 选择文本工具

  • 添加 “关于” 文本作为导航的开始

  • 确保尺寸和颜色为 24 和白色

如何在 Figma 中标记元素和创建组


在 Figma 中处理大量图层可能会让人感到困惑,因此在创建元素后立即标记所有元素。更好的是使用标签(例如 “横幅背景” 或“导航栏”)对不同的部分和形状进行分组。

  • 选择元素并右键单击以进行分组,或按 Ctrl + G

  • 为组命名

  • 将页面的每个部分放在相应的组内,以在页面变大时提高可读性

总结


Figma 入门很容易,但要充分发挥它的潜力,还有很多东西需要学习。有了形状、图像和文本的基础知识,你就可以轻松开始制作网站原型、设计移动应用程序等等。

如果你想更深入地了解这些基础知识,我建议你观看并关注整个视频教程,该教程更深入地介绍各个方面。

你可以在这里查看设计的完整效果。

这整个过程是我在自己的频道上尝试教授的内容的一部分,也是我正在编写的名为  Enhance UI  的设计课程 / 书籍的一部分。我的目标是帮助开发人员了解设计的基本原理。在这里查看我的书籍。

希望你喜欢这篇文章!

原文链接:https://www.freecodecamp.org/news/figma-crash-course/

作者:Adrian Twarog

译者:Chengjun.L